<template>

    <el-scrollbar class="login-box">

        <div class="login-box-title">
            <p>欢迎登陆</p>
            <div class="login-box-border"></div>
            <div class="login-box-img">
                <img :src="IMG" alt="">
            </div>

        </div>

        <!-- 登录板块 -->
        <div class="login-box-div">

            <el-tabs v-model="activeName"
                class="login-box-tabs">

                <el-tab-pane label="单位登录" name="unit">
                    <UnitLogin />
                </el-tab-pane>

                <el-tab-pane label="个人登录" name="personal">
                    <PersonalLogin />
                </el-tab-pane>
            </el-tabs>


            <!-- 分割线 -->
            <div class="box-line"></div>


            <!-- 单位注册申请表 -->
            <div class="box-unit-table">

                <el-link href="/青海省无人机综合服务管理平台注册审核表.docx"
                    target="_blank"
                    download="青海省无人机综合服务管理平台注册审核表"
                    class="box-unit-table-a">
                    <el-icon :size="20" color="blue">
                        <DocumentCopy />
                    </el-icon>
                    下载《申请表》
                </el-link>


                <div class="box-inquire">
                    <div>
                        <LoginTable />
                    </div>

                    <span
                        style="color:rgb(195, 195, 195) !important;">|</span>

                    <div class="box-text">
                        <el-popover placement="bottom-start"
                            :width="200" trigger="click">
                            <template #reference>
                                <div style="margin-right: 16px"
                                    class="box-text-a">
                                    申请进度查询
                                </div>
                            </template>

                            <div @click="ProgressLogin = true"
                                class="box-text-b">
                                单位注册审核进度查询
                            </div>

                            <div @click="ProgressPassword = true"
                                style="cursor: pointer;"
                                class="box-text-b">
                                单位找回密码申请进度查询
                            </div>

                        </el-popover>

                        <el-dialog v-model="ProgressLogin">
                            <ProgressQueryLogin />
                        </el-dialog>

                        <el-dialog
                            v-model="ProgressPassword">
                            <ProgressQueryPassword />
                        </el-dialog>

                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>


<script lang='ts' setup>
import { onMounted, ref } from 'vue';

import IMG from '@/assets/img/login/logo_title.a80fbaa1.png'


import UnitLogin from './LnginCollection/UnitLogin/UnitLogin.vue'
import PersonalLogin from './LnginCollection/PersonalLogin/PersonalLogin.vue'

import { DocumentCopy } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';


const router = useRouter()
const route = useRoute()
const ProgressLogin = ref(false)
const ProgressPassword = ref(false)

const activeName = ref('personal')

</script>


<style lang='scss' scoped>
.login-box {
    height: 100%;
    background: url(@/assets/img/login/login_bg.png)no-repeat center center;
    background-size: cover;

    .login-box-title {
        width: 480px;
        height: 200px;
        position: absolute;
        top: 22%;
        left: 13%;

        p {
            font-size: 25px;
            font-weight: 900;
            color: #fff;
        }

        .login-box-border {
            width: 250px;
            height: 1px;
            margin: 30px 0;
            background: rgb(224, 224, 224);
        }

        .login-box-img {
            width: 500px;
            height: 60px;
            line-height: 80px;

            img {
                width: 100%;
            }
        }
    }

    ::after {
        width: 0px;
    }

    .login-box-div {
        position: absolute;
        width: 470px;
        border-radius: 8px;
        padding: 40px 0;
        background: #fff;
        left: 65%;
        top: 22%;
        // margin: auto;

        ::v-deep .el-tabs__nav {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;

            .el-tabs__item {
                font-size: 20px;
                color: rgb(165, 165, 165);
            }

            .is-active {
                font-weight: 900;
                color: black;
            }

            // background-color: aqua;
            .el-tabs__active-bar {
                width: 52px;
                height: 4px;
                border-radius: 10px;
            }

        }

        // 分割线
        .box-line {
            width: 345px;
            height: 2px;
            background: rgb(212, 212, 212);
            margin: 0 auto;
            margin-top: 18px;
            border-radius: 10px;
        }

        // 单位注册申请表
        .box-unit-table {
            width: 345px;
            height: 105px;
            margin: 0 auto;
            overflow: hidden;



            .box-unit-table-a {
                width: 343px;
                height: 40px;
                margin-top: 18px;
                border: 1px solid rgb(187, 187, 187);
                border-radius: 20px;
                display: flex;
                justify-content: center;

                .el-icon {
                    height: 40px;
                    align-items: centerv;
                    margin-right: 10px;
                }

                ::v-deep .el-link__inner {
                    color: rgb(41, 41, 41);
                    font-size: 12px;
                    line-height: 40px;
                }
            }

            // 申请进度查询
            .box-inquire {
                width: 343px;
                display: flex;
                justify-content: space-around;
                margin: 15px 0;

                .box-text {
                    .box-text-a {
                        font-size: 14px;
                        color: rgb(50, 87, 252);

                        // 改变鼠标样式
                        cursor: pointer;
                    }

                }

            }
        }

    }
}

.box-text-b {
    cursor: pointer;
    color: black;
}

::v-deep .el-dialog {
    width: 430px;

    // height: 320px;
    .el-dialog__body {
        padding: 0;
    }
}
</style>
